.vxp-column {
  @include basis;

  position: relative;
  max-width: 100%;

  &--0 {
    display: none;
  }

  @for $i from 0 through 24 {
    $size: (math.div(1, 24) * $i * 100) * 1%;

    &--#{$i} {
      flex: 0 0 $size;
      max-width: $size;
    }

    &--offset-#{$i} {
      margin-left: $size;
    }

    &--pull-#{$i} {
      right: $size;
    }

    &--push-#{$i} {
      left: $size;
    }

    &--order-#{$i} {
      order: $i;
    }
  }

  @each $point in map-keys($vxp-break-point-map) {
    @media only screen and #{inspect(map-get($vxp-break-point-map, $point))} {
      &--#{$point}-0 {
        display: none;
      }

      @for $i from 0 through 24 {
        $size: (math.div(1, 24) * $i * 100) * 1%;

        &--#{$point}-#{$i} {
          flex: 0 0 $size;
          max-width: $size;
        }

        &--#{$point}-offset-#{$i} {
          margin-left: $size;
        }

        &--#{$point}-pull-#{$i} {
          right: $size;
        }

        &--#{$point}-push-#{$i} {
          left: $size;
        }

        &--#{$point}-order-#{$i} {
          order: $i;
        }
      }
    }
  }
}
